<template>
    <ul>
        <li v-for="(item,index) in resource" :key="index">
            <a
                    @click="options(index,item)"
                    :class="{'choose':choose===index}">{{ item }}
            </a>
        </li>
    </ul>
</template>

<script setup>
import {ref} from "vue";

//emit 自定义事件
const emit = defineEmits(['columnOptions'])

//选项列表
const resource = ref([
    "软件",
    "游戏",
    "系统",
    "实用工具"
]);

//当前选项
const choose = ref(0)

// 选项点击事件
const options = (index, item) => {
    choose.value = index;
    emit('columnOptions', item);
}
</script>

<style scoped>
ul {
    width: 100%;
    list-style: none;
    display: flex;
    padding: 5px 0 10px;

}

li {
    min-width: 50px;
    margin-right: 15px;

}

li a {
    display: inline-block;
    font-size: 16px;
    padding: 10px 0;
    cursor: pointer;
    background: transparent;
    border-bottom: 2px solid transparent;
}

li a:hover {
    color: #6da6e1;
}

.choose {
    position: relative;
    color: #6da6e1;
    /*border-bottom: 2px solid #6da6e1;*/

}

.choose:after {
    position: absolute;
    bottom: 0;
    left: 0;
    display: inline-block;
    content: "";
    height: 2px;
    width: 100%;
    background: #6da6e1;
    border-radius: 1px;
    animation: choose .3s ease-in 0s 1 forwards;
}

@keyframes choose {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }

}
</style>